<script setup>
import {
  getTemplateApprovalFile,
} from "@/api/document/fileTemplate.js"
import {ref} from 'vue'
import {isNull} from "@/utils/validate.js";
import pageofficeCtrlUtil, {saveWord} from "@/plugins/pageoffice/pageoffice-word-excel.js";
import {dataRegionUtil} from "@/plugins/pageoffice/dataRegion.js";
import {templateFunctions, templateFileLayout} from "@/utils/template.js";
import {getPOHtmlStyle} from "@/plugins/pageoffice/pageoffice-common.js";

const poHtml = ref('')
const { titleRef1, rowRef1, titleRef2, rowRef2, tableHeight } = templateFileLayout()
let dataRegionRefs = reactive({
  addedDataRegions: [],
  addedDataRegionForm: {
    dataRegionNameForQuery: ''
  },
  addedDataRegionTableData: [],
  addedDataRegionTableRef: null,
  initDataRegions: [],
  rawInitDataRegions: [],//原始预置数据区域
  initDataRegionForm: {
    initDataRegionNameForQuery: ''
  },
  initDataRegionTableData: [],
  initDataRegionTableRef: null
})
const {addedDataRegionForm, addedDataRegions, addedDataRegionTableData, addedDataRegionTableRef,
  initDataRegions, rawInitDataRegions, initDataRegionForm, initDataRegionTableData, initDataRegionTableRef} = toRefs(dataRegionRefs)
const {initDataRegionData, queryDataRegion, queryInitDataRegion, addInitDataRegion, deleteInitDataRegion, resetDataRegionData}
    = templateFunctions(addedDataRegionForm, addedDataRegions, addedDataRegionTableData, addedDataRegionTableRef,
    initDataRegions, rawInitDataRegions, initDataRegionForm, initDataRegionTableData, initDataRegionTableRef)

let templateId = undefined
//正文是否可编辑
const isEdit = ref(false)
//标识是否导入的文件
let isImportData = false
//组装控件所需的自定义按钮的参数,
// 数组的第一个元素： 按钮的标题（如果设置为 "-"，表示此按钮是分隔线）；第二个元素： 点击当前按钮时触发的 JavaScript 函数名；第一个元素： 按钮图标的索引；
//组装Word所需的自定义按钮参数
const customButtonsForPO = [
  ["保存", "save", 1],
  ["导入本地文件", "importData", 13],
  ["-", "", 0],
]

onMounted(() => {
  //获取pageoffice客户端传过来的参数
  templateId = pageofficectrl.WindowParams
  getTemplateWordFile()
  //挂载PageOfficeCtrl 控件需要调用的函数，例如控件触发的事件、自定义按钮触发的函数等。
  pageofficeCtrlUtil.jsFunctionMounted(customJSFunctions, customButtonsForPO)
})

function getTemplateWordFile() {
  getTemplateApprovalFile(templateId).then(result => {
    poHtml.value = result.html
    isEdit.value = result.save
    //已添加的数据区域
    let approvalDataRegions = isNull(result.approvalDataRegions) ? [] : result.approvalDataRegions
    //默认预置的数据区域
    let approvalInitDataRegions = isNull(result.approvalInitDataRegions) ? [] : result.approvalInitDataRegions
    initDataRegionData(approvalInitDataRegions, approvalDataRegions)
  })
}

const customJSFunctions = {
  //控件初始化事件，函数名是指定的，不可修改，此处根据实际情况重写OnPageOfficeCtrlInit事件代码
  OnPageOfficeCtrlInit: () => {
    //添加自定义按钮，这些自定义按钮执行的js函数需要在 window.POPageMounted 挂载
    pageofficeCtrlUtil.addCustomButtons(isEdit.value ? customButtonsForPO : null)
  },
  AfterDocumentOpened: () => {
    if (isImportData) {
      resetDataRegionData()
    }
  },
  save: ()=> {
    //设置保存文件地址
    const saveFilePage = '/doc/fileTemplate/updateTemplateApprovalWord/' + templateId
    //设置保存数据区域地址
    const saveDataPage = '/doc/fileTemplate/updateTemplateApprovalDataRegion/' + templateId
    //执行保存
    saveWord(saveFilePage, saveDataPage)
  },
  importData: ()=> {
    isImportData = true
    pageofficectrl.WordImportDialog()
  },
}
</script>

<template>
  <el-row style="height: 100%">
    <el-col :span="8" class="card-box left-container">
      <el-divider content-position="center">
        <el-text ref="titleRef1" type="danger" size="large">预置数据区域
          <el-tooltip placement="bottom" >
            <template #content>
              <p style="max-width: 300px; word-break: break-all; white-space: normal;">
                公文呈批表中若添加了数据区域，在公文拟稿时，会根据拟稿人输入的内容动态填充为对应的数据。
              要添加数据区域，先在右侧的Word文件中将光标定位到相应位置，然后在预置数据区域列表中选择要添加的数据区域，点击“添加”按钮，进行添加。</p>
            </template>
            <el-icon :size="18" color="#f56c6c" style="margin-left: 2px;">  <question-filled /> </el-icon>
          </el-tooltip>
        </el-text>
      </el-divider>
      <el-row ref="rowRef1" >
        <el-form @submit.native.prevent
            :model="initDataRegionForm"
            ref="initDataRegionFormRef"
            style="width: 100%">
          <el-form-item>
            <el-input v-model="initDataRegionForm.initDataRegionNameForQuery" placeholder="请输入可选数据区域的关键词，进行搜索"
                      type="text"
                      @input="queryInitDataRegion"
                      clearable >
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table ref="initDataRegionTableRef" :data="initDataRegionTableData" class="table" style="width: 100%;" :height="tableHeight"
                  scrollbar-always-on>
          <el-table-column prop="value" label="可选数据区域"/>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="addInitDataRegion(scope.row)"
                  v-if="isEdit"
              >
                添加
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-divider content-position="center" style="margin-top: 43px;">
        <el-text ref="titleRef2" type="danger" size="large">已添加数据区域
          <el-tooltip placement="bottom" >
            <template #content>
              <p style="max-width: 300px; word-break: break-all; white-space: normal;">
                公文呈批表中添加的数据区域，在公文拟稿时，会根据拟稿人输入的内容动态填充为对应的数据。
              </p>
            </template>
            <el-icon :size="18" color="#f56c6c" style="margin-left: 2px;">  <question-filled /> </el-icon>
          </el-tooltip>
        </el-text>
      </el-divider>
      <el-row ref="rowRef2">
        <el-form @submit.native.prevent
            :model="addedDataRegionForm"
            ref="dataRegionFormRef"
            style="width: 100%">
          <el-form-item>
            <el-input v-model="addedDataRegionForm.dataRegionNameForQuery" placeholder="请输入已添加编辑区域的关键词，进行搜索"
                      type="text"
                      @input="queryDataRegion"
                      clearable >
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table ref="addedDataRegionTableRef" :data="addedDataRegionTableData" class="table" style="width: 100%;" :height="tableHeight"
                  scrollbar-always-on>
          <el-table-column label="已添加编辑区域" prop="value"/>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="dataRegionUtil.locateDataRegion(scope.row.name)"
              >
                定位
              </el-button>
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteInitDataRegion(scope.row, scope.$index)"
                  v-if="isEdit"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-col>
    <el-col :span="16" class="card-box">
      <el-form method="post">
        <!-- 此div用来加载PageOffice客户端控件 -->
        <div :style="getPOHtmlStyle()" v-html="poHtml"></div>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>
.left-container {
  border-right: #d5dbe4 1px dashed;
  height: auto;
}

.left-container .table {
  border: #d5dbe4 1px solid;
  border-radius: 2px;
}
</style>

